<template>
	<view class="container">
		<view class="content">
			<view class="back" :style="{ top: getStatusBarHeight() + 'px' }">
				<navigator url="/pages/index/index" open-type="switchTab">
					<uni-icons type="left" size="30"></uni-icons>
				</navigator>
			</view>
			<view class="body">
				<view class="title">登录</view>
				<uni-forms :label-width="60" :modelValue="formData">
					<uni-forms-item label="用户名">
						<uni-easyinput v-model="formData.username" placeholder="请输入用户名"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="密码">
						<uni-easyinput v-model="formData.password" type="password" placeholder="请输入密码"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
				<button style="background-color: #ebf5ff" type="primary" plain @click="onSubmit">登录</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive } from 'vue';
import { login } from '../../api/user.js';
import { getStatusBarHeight, getNavBarHeight, getTitleBarHeight } from '../../utils/system.js';

const formData = reactive({
	username: '',
	password: ''
});
const onSubmit = async () => {
	const res = await login({
		username: formData.username,
		password: formData.password
	});
	// 存储数据
	uni.setStorageSync('access_token', res.data.accessToken);
	uni.setStorageSync('refresh_token', res.data.refreshToken);
	uni.setStorageSync('user_info', JSON.stringify(res.data.userInfo)); // 存储对象需要转为字符串
	uni.showToast({
		title: '登录成功！',
		icon: 'success',
		position: 'top'
	});
	// 登录成功后跳转
	uni.switchTab({
		url: '/pages/index/index'
	});
};
</script>

<style lang="scss" scoped>
.container {
	height: 100vh;
	.content {
		.back {
			width: 60rpx;
			height: 60rpx;
			position: relative;
			left: 20rpx;
			margin-bottom: 50rpx;
		}
		.body {
			padding: 80rpx;
			font-family: 'KaiTi', sans-serif;
			font-weight: 700;
			.title {
				font-size: 50rpx;
				margin-bottom: 30rpx;
			}
			.captcha {
				display: flex;
				button {
					margin-left: 20rpx;
				}
			}
			.tips {
				font-size: 30rpx;
				display: flex;
				justify-content: end;
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>
